<div class="h-[50rem] md:h-[50rem] md:w-[50rem] w-[25rem] flex flex-col">
  <div class="mb-6 flex items-center gap-4">
    <input
      id="disabled-input"
      type="text"
      pInputText
      [value]="selectedProductName"
      [disabled]="true"
      class="w-full p-2 text-base"
    />
    <p-button label="Select" severity="success" (click)="onSelect()"></p-button>
  </div>
  <p-table [value]="paths" styleClass="responsive-table" class="flex-grow overflow-y-auto">
    <ng-template pTemplate="header">
      <tr>
        <th class="w-[1%]"></th>
        <th class="w-[99%]">Name</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-product>
      <tr class="cursor-pointer hover:bg-white/10" (click)="onRowClick(product)">
        <td>
          @if (product === '...') {
            <i class="pi pi-arrow-up"></i>
          }
          @if (product !== '...') {
            <i class="pi pi-folder-open"></i>
          }
        </td>
        <td>{{ product }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>
